<template>
    <div class="category-dialog">
        <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="35%" :modal-append-to-body="false" >
             <el-tree
                     :indent="38"
                     :props="props"
                     :data="data"
                     show-checkbox
                     check-strictly
                     node-key="id"
                     ref="treeForm"
                     @node-click="handleNodeClick"
                     @check="handleCheckClick"
                     :render-content="renderContent"
             >
             </el-tree>
              <div slot="footer" class="dialog-footer">
                     <el-button @click="$emit('cancel');">关 闭</el-button>
                     <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
              </div>
        </el-dialog>
    </div>
</template>

<script>
    import SelectItems from './SelectCompanyItems.vue'
    export default {
        name: 'selectMenu',
        props: {
            dialogFormVisible:Boolean,
            data: [Array,Boolean],
            title:String
        },
        data() {
           return {
               props: {
                   value:'id',
                   label: 'name',
                   children: 'children'
               },
               btnLoading:false
           }
        },
        watch: {
            'data': {
                handler: function () {
                    if(this.data){
                        for (let k in this.form){
                          this.form[k] = this.data[k];
                        }
                    }else {
                      for (let k in this.form){
                        this.form[k] = '';
                      }
                    }
                },
                deep: true
            }
        },
        methods: {
          handleNodeClick(data,checked,node) {
             if(!checked.checked){
                 this.$refs.treeForm.setCheckedNodes([]);
                 this.$refs.treeForm.setCheckedKeys([data.id]);
             }

          },

          handleCheckClick(data, node){
                this.$refs.treeForm.setCheckedNodes([]);
                this.$refs.treeForm.setCheckedKeys([data.id]);
          },

          btnOk(data,k) {
             var selectNodes=this.$refs.treeForm.getCheckedNodes();
             if(selectNodes.length<=0){
                this.$message.error("error:请选择公司");
                return
             }

             if(selectNodes.length>1){
                this.$message.error("error:只能选择一个公司");
                return
             }

             this.$emit('val-change',selectNodes);
             this.btnLoading = true;
             setTimeout(()=>{this.btnLoading = false},1000)
          },

          renderContent(h, { node, data, store }) {
             return this.$createElement('SelectItems',{props: {data:node},on:{ }});
          }
        },
        components: {
           SelectItems

        }
    }
</script>

<style scoped lang="less">
.bg {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../../../static/img/sky.jpg');
    background-position: -20% 10%;
    background-size: contain;
    #particles-js {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}
.login-wrap {
  width: 330px;
  border-radius: 5px;
  padding: 20px;
  z-index: 3;
  margin-right: -37%;
  background: rgba(216,220,229,0.5);
  .el-form-item {
    margin-bottom: 25px !important;
  }
  h3 {
    text-align: center;
    color: #ebedef;
    margin-top: 0px;
    margin-bottom: 5px;
    span {
        color: #20a0ff;
    }
  }
  form {
    margin-top: 25px;
    .el-form-item {
      margin-bottom: 15px;
    }
  }
  a {
    text-decoration: none;
    color: #1f2d3d;
  }
  button {
    width: 100%;
    font-weight: 600;
  }
}
</style>

